import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import EditPage from '@/components/EditPage';
import DetailPage from '@/components/DetailPage';
import FileReader from '@/components/FileReader';
import {
  queryDictData,
  formItemFragement,
  queryDict,
  queryPerson,
  formatPrice,
} from '@/utils/common';
import { allDictList } from '@/utils/constans';
import {
  selectArchivesDetailAndInfo,
  renderTableAdSelect,
  archivesStatusList,
  archivesTypeList,
  allUrl,
  renderTableAdSearch,
  allDispatchType,
} from './utils';
import TrainNumInfo from './TrainNumInfo';
import OilInfo from './OilInfo';
import PressureInfo from './PressureInfo';
import ArchivesDriverslInfo from './ArchivesDriverslInfo';

@connect(({ Archives, loading, component }) => ({
  Archives,
  archivesDetail: Archives.archivesDetail,
  dictObject: component.dictObject,
  loading: loading.effects[allDispatchType.detail],
}))
export default class ArchivesDetail extends Component {
  state = {
    // detailId: '',
    visibleTrain: false,
    visibleOperate: false,
    YCD: true,
  };
  componentWillMount() {
    // 查询字典项
    const allDict = [allDictList.businessType];
    queryDict({ props: this.props, allDict });
  }

  componentDidMount() {
    const { detailId, isHK } = this.props;
    const id = detailId;
    if (!id) return;
    selectArchivesDetailAndInfo({
      type: allDispatchType.detail,
      payload: { id, isHK },
      props: this.props,
      callback: data => {
        const { relationObjId, receiverType } = data;
        if (relationObjId) return;
        const url = receiverType === 'EMPLOYEE' ? allUrl.userList : allUrl.supplierList;
        queryPerson({ data: relationObjId, props: props, url });
      },
    });
  }

  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };
  formatMoney = text => {
    return text && Number(text) !== 0 ? Number(text).toFixed(2) : 0;
  };
  setTrainInfoModal = type => {
    const { visibleTrain } = this.state;
    this.setState({
      visibleTrain: !visibleTrain,
      type,
    });
  };
  setOilInfoModal = type => {
    const { visibleOperate } = this.state;
    this.setState({
      visibleOperate: !visibleOperate,
      type,
    });
  };

  render() {
    const { loading, archivesDetail, detailId } = this.props;
    const { visibleTrain, visibleOperate, YCD } = this.state;
    const detail = archivesDetail[detailId] || {};
    const businessType = detail.businessType;
    const editPageParams = {
      panelValue: [
        { key: '基础信息' },
        detail.status !== 'UNSEALED' && {
          key: '司机提成',
        },
        { key: '车次信息' },
        { key: '加油记录' },
        { key: '压夜记录' },
      ],
    };

    const formItem = [
      [
        <DetailPage label="档案编号" value={detail.archivesNo} />,
        <DetailPage
          label="状态"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.status,
            data: archivesStatusList,
          })}
        />,
      ],
      [
        <DetailPage label="车牌" value={detail.cartPlate} />,
        <DetailPage label="所属公司" value={detail.ownCompanyName} />,
        // <DetailPage label="车挂" value={detail.cartHangingName} />,
      ],
      [
        <DetailPage
          label="业务类型"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.businessType || 'INLAND',
            key: allDictList.businessType,
          })}
        />,
        <DetailPage label="司机" value={detail.driverName} />,
      ],
      // [
      //     <DetailPage label="ETC发车金额" value={formatPrice(detail.etcStartAmount)} />,
      //     <DetailPage label="ETC收车金额" value={formatPrice(detail.etcEndAmount)} />,
      // ],
      [
        <DetailPage label="发车时间" value={detail.transportStartTime} />,
        <DetailPage label="收车时间" value={detail.transportEndTime} />,
      ],
      [
        <DetailPage label="发车里程(KM)" value={detail.startMileage} />,
        <DetailPage label="收车里程(KM)" value={detail.collectMileage} />,
      ],
      [
        <DetailPage label="行驶里程(KM)" value={detail.travelMileage} />,
        <DetailPage label="行驶时长" value={detail.travelTime} />,
      ],
      [
        <DetailPage label="结算周期" value={detail.settlementDate} />,
        <DetailPage label="是否计算油耗" value={detail.isOilAward == 'no' ? '否' : '是'} />,
      ],
      [<DetailPage label="耗油量(L)" value={detail.consumptionOil} />, <></>],
      [<DetailPage label="备注" value={detail.remark} />],
      [
        <DetailPage
          label="附件"
          value={
            <FileReader
              urlType="tms"
              value={detail.fileList || []}
              showUploadList={{ showPreviewIcon: true, showRemoveIcon: false }}
              showUpload={false}
            />
          }
        />,
      ],
    ];

    return (
      <EditPage {...editPageParams}>
        <Spin spinning={loading}>{formItemFragement(formItem)}</Spin>
        {detail.status !== 'UNSEALED' && (
          <Fragment>
            <ArchivesDriverslInfo archivesId={detailId} businessType={businessType} isHK={false} />
          </Fragment>
        )}
        <Fragment>
          {/* 行车档案详情--车次信息 */}
          <TrainNumInfo
            id={detailId}
            mode="detail"
            type="edit"
            visible={visibleTrain}
            setTrainInfoModal={this.setTrainInfoModal}
            disabled={true}
            businessType={businessType}
            YCD={YCD}
          />
        </Fragment>
        <Fragment>
          <OilInfo
            detailId={detailId}
            mode="detail"
            type="edit"
            visibleOperate={visibleOperate}
            setOilInfoModal={this.setOilInfoModal}
            disabled={true}
          />
        </Fragment>
        <Fragment>
          <PressureInfo archivesId={detailId} onlyRead={true} mode="detail" disabled={true} />
        </Fragment>
      </EditPage>
    );
  }
}
